<template>
  <view class="sign-detail">
    <map
      style="width: 100%; height: 442rpx"
      :latitude="signInfo.latitude"
      :longitude="signInfo.longitude"
      :markers="
        signInfo?.id
          ? [
              {
                id: 1,
                latitude: signInfo?.latitude,
                longitude: signInfo?.longitude,
                iconPath: iconMap,
                title: signInfo.customerName,
                width: 18,
                height: 22,
              },
            ]
          : []
      "
    />
    <view class="sign-row">
      <view class="sign-label">签到人员</view>
      <view class="sign-value">{{ signInfo.createUserNickName || "--" }}</view>
    </view>
    <view class="sign-row">
      <view class="sign-label">签到时间</view>
      <view class="sign-value">{{ signInfo.createTime || "--" }}</view>
    </view>
    <view class="sign-row">
      <view class="sign-label">签到地址</view>
      <view class="sign-value">
        <uv-icon v-if="signInfo.address" :name="iconMap" style="margin-right: 20rpx" />
        <view>{{ signInfo.address || "--" }}</view>
      </view>
    </view>
    <view class="sign-row">
      <view class="sign-label">关联客户</view>
      <view class="sign-value green">{{ signInfo.customerName || "--" }}</view>
    </view>
    <view class="sign-row">
      <view class="sign-label">签到类型</view>
      <view class="sign-value">
        {{ signInfo.clockInUserType == 1 ? "任务签到" : "工单签到" }}
      </view>
    </view>
    <view class="sign-row">
      <view class="sign-label">关联工单</view>
      <view class="sign-value green">{{ signInfo.workOrderName || "--" }}</view>
    </view>
    <view class="sign-row">
      <view class="sign-label">备注信息</view>
      <view class="sign-value">{{ signInfo.remark || "--" }}</view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getClockInfo } from "@/request/home";
import iconMap from "@/static/sign/icon_map.png";

const signId = ref(""); // 打卡id
const signInfo = ref({}); // 打卡信息

onLoad((e) => {
  signId.value = e.id;
  getDeail();
});

// 获取当前位置
const getDeail = () => {
  getClockInfo(signId.value).then((res) => {
    if (res.code == 200) {
      signInfo.value = res.data;
    }
  });
};
</script>
<style lang="scss" scoped>
.sign-detail {
  .sign-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx;
    border-bottom: 1px solid #dedede;
    .sign-label {
      width: 160rpx;
      font-size: 28rpx;
      color: #757575;
    }
    .sign-value {
      font-size: 28rpx;
      color: #212121;
      flex: 1;
      display: flex;
      justify-content: flex-end;
      view {
        text-align: right;
      }
    }
    .green {
      color: #4ea770;
    }
  }
}
</style>
